<template>
  <div class="header">
    <van-icon name="wap-home-o" />
    <div class="headerText">网易严选</div>
    <van-icon class="search" name="search" />
    <van-icon name="cart-o" />
  </div>
  <div class="tabs">
    <van-tabs>
      <van-tab v-for="index in itemList.categoryL2List" :title="index.name" :key="index">
        <div class="title">{{ category.itemList.categoryItems.category.frontName }}</div>
        <div class="content">
          <div class="main" v-for="(item, index) in itemList.categoryItems.itemList" :key="item.id">
            <img class="mainImg" :src="item.listPicUrl" alt="">
            <div class="mainText">{{ item.name }}</div>
            <div class="price">￥{{ item.retailPrice }}</div>
            <div class="presell">
              <div class="presellleft">{{ item.finalPriceInfoVO.banner.title }}</div>
              <div class="presellRight">{{ item.finalPriceInfoVO.banner.content }}</div>
            </div>
          </div>
          <div class="space"></div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, computed } from "vue";
import { useRouter } from 'vue-router';
export default defineComponent({
  name: "categoryItem",
});
</script>
<script lang="ts" setup>
import { categoryStore } from '@/stores/category'
import { useRoute } from 'vue-router';
import { storeToRefs } from "pinia";
const category = categoryStore()
const { category1Id, itemList } = storeToRefs(category)
const router = useRouter()
onMounted(() => {
  category.getCategoryItemList(category1Id.value, route.query.catgory2Id)
})
const route = useRoute()

</script>

<style lang="less" scoped>
.header {
  height: 44px;
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 10px;
}

.headerText {
  flex: 1;
  font-weight: 700;
  text-align: center;
}

.search {
  margin-right: 10px;
}

.tabs {
  font-size: 16px;
}

.title {
  width: 100%;
  height: 55px;
  font-size: 14px;
  text-align: center;
  line-height: 55px;
}

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.main {}

.main .mainImg {
  width: 172.5px;
  height: 172.5px;
  border-radius: 10px;
}

.mainText {
  width: 172.5px;
  font-size: 14px;

}

.price {
  color: red;
  font-weight: 600;
}

.presell {

  height: 23px;
  display: flex;
  font-size: 12px;
  text-align: center;
  line-height: 23px;
  background-color: #ffe9eb;
  border-radius: 20px;
}

.presellleft {
  background-color: red;
  border-radius: 20px;
  color: white;
  margin-right: 10px;
}

.space {
  width: 172.5px;
}</style>
